<template>
  <div class="qualification-certificate">
    <!--    资质证照查询表单-->
    <div class="search">
      <div class="title">资质证照列表</div>
      <el-form :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline" size="mini"
               ref="search">
        <el-form-item label='资质证照id' prop="cer_id">
          <el-input v-model.number="searchForm.cer_id" placeholder="请填入数字"
            oninput="if(isNaN(value)){value=value.replace(/[^0-9]/g,'')}" clearable></el-input>
        </el-form-item>
        <el-form-item label='资质证照名称' prop="cer_name">
          <el-input v-model="searchForm.cer_name" clearable></el-input>
        </el-form-item>
        <el-form-item label='服务商id' prop="ser_id">
          <el-input v-model.number="searchForm.ser_id" placeholder="请填入数字"
            oninput="if(isNaN(value)){value=value.replace(/[^0-9]/g,'')}" clearable></el-input>
        </el-form-item>
<!--        <el-form-item label="分类" prop="cer_kind">-->
<!--          <el-select v-model="searchForm.cer_kind" >-->
<!--            <el-option label="全部" :value="-1"></el-option>-->
<!--            <el-option label="食品安全" :value="1"></el-option>-->
<!--            <el-option label="经营许可" :value="2"></el-option>-->
<!--            <el-option label="高薪企业" :value="3"></el-option>-->
<!--            <el-option label="ICP认证" :value="4"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="状态" prop="cer_type">
          <el-select v-model="searchForm.cer_type" >
            <el-option label="全部" :value="-1"></el-option>
            <el-option label="上线" :value="1"></el-option>
            <el-option label="下线" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--    新增资质证照按钮-->
    <el-row>
      <el-col>
        <el-button type="primary" @click="showAddCateDialog" size="mini">新增</el-button>
      </el-col>
    </el-row>

    <!--   资质证照列表-->
    <el-table
      :data="showTableData"
      stripe
      style="width: 100%"
      size="mini">
      <el-table-column
        type="index"
        width="50"
        label="#">
      </el-table-column>
      <el-table-column
        prop="cer_id"
        label="资质证照id">
      </el-table-column>
      <el-table-column
        prop="cer_name"
        label="资质证照名称">
      </el-table-column>
      <el-table-column
        prop="ser_id"
        label="服务商id">
      </el-table-column>
      <el-table-column
        prop="cer_price"
        label="价格">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="cer_kind"-->
<!--        label="分类">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="scope.row.cer_kind==1">食品安全</span>-->
<!--          <span v-else-if="scope.row.cer_kind==2">经营许可</span>-->
<!--          <span v-else-if="scope.row.cer_kind==3">高薪企业</span>-->
<!--          <span v-else>ICP认证</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="cer_type"
        label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.cer_type==1">上线</el-tag>
          <el-tag type="info" v-else>下线</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateCertificationClick(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="deleteCertification(scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="toggleState(scope.row)">{{scope.row.cer_type==1 ? "下线" : "上线"}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--      分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--    增加资质证照对话框-->
    <el-dialog title="添加资质证照" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"
               :close-on-click-modal="false">
      <el-form  :model="addCertificationForm" label-width="120px" class="demo-form-inline" size="mini"
               :rules="certificationRule" ref="addCertificationRef">
        <el-form-item label='资质证照名称' prop="cer_name">
          <el-input v-model="addCertificationForm.cer_name"></el-input>
        </el-form-item>
        <el-form-item label='服务商id' prop="ser_id">
          <el-input v-model="addCertificationForm.ser_id" placeholder="请输入数字"
                    oninput="if(isNaN(value)){value=value.replace(/[^0-9]/g,'')}"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="cer_price">
          <el-input v-model="addCertificationForm.cer_price" placeholder="请输入数字，最多保留两位小数"
                    oninput="if(isNaN(value)){value=value.replace(/[^0-9.]/g,'')}
      if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}
      if(value.indexOf('.')>0) {value=value.slice(0,value.indexOf('.')+1)+value.slice(value.indexOf('.')+1).replace(/[.]/g,'');}" clearable></el-input>
        </el-form-item>
<!--        <el-form-item label="分类" prop="cer_kind">-->
<!--          <el-select v-model="addCertificationForm.cer_kind" >-->
<!--            <el-option label="食品安全" :value="1"></el-option>-->
<!--            <el-option label="经营许可" :value="2"></el-option>-->
<!--            <el-option label="高薪企业" :value="3"></el-option>-->
<!--            <el-option label="ICP认证" :value="4"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="状态" prop="cer_type">
          <el-select v-model="addCertificationForm.cer_type" >
            <el-option label="上线" :value="1"></el-option>
            <el-option label="下线" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAddCertification">添加资质证照</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--    编辑资质证照对话框-->
    <el-dialog title="编辑资质证照" :visible.sync="updateDialogVisible" width="50%" @close="updateDialogClosed"
               :close-on-click-modal="false">
      <el-form  :model="updateCertificationForm" label-width="120px" class="demo-form-inline" size="mini"
                :rules="certificationRule" ref="updateCertificationRef">
        <el-form-item label='资质证照id' prop="cer_id">
          <el-input v-model="updateCertificationForm.cer_id" disabled></el-input>
        </el-form-item>
        <el-form-item label='资质证照名称' prop="cer_name">
          <el-input v-model="updateCertificationForm.cer_name"></el-input>
        </el-form-item>
        <el-form-item label='服务商id' prop="ser_id">
          <el-input v-model="updateCertificationForm.ser_id"  placeholder="请输入数字"
                    oninput="if(isNaN(value)){value=value.replace(/[^0-9.]/g,'')}"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="cer_price">
          <el-input v-model="updateCertificationForm.cer_price" placeholder="请输入数字，最多保留两位小数"
                    oninput="if(isNaN(value)){value=value.replace(/[^0-9.]/g,'')}
      if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}
      if(value.indexOf('.')>0) {value=value.slice(0,value.indexOf('.')+1)+value.slice(value.indexOf('.')+1).replace(/[.]/g,'');}" clearable></el-input>
        </el-form-item>
<!--        <el-form-item label="分类" prop="cer_kind">-->
<!--          <el-select v-model="updateCertificationForm.cer_kind" >-->
<!--            <el-option label="食品安全" :value="1"></el-option>-->
<!--            <el-option label="经营许可" :value="2"></el-option>-->
<!--            <el-option label="高薪企业" :value="3"></el-option>-->
<!--            <el-option label="ICP认证" :value="4"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="状态" prop="cer_type">
          <el-select v-model="addCertificationForm.cer_type" >
            <el-option label="上线" :value="1"></el-option>
            <el-option label="下线" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onUpdateCertification">编辑资质证照</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getCertificateByKey} from '@/network/business/qualificationCertificate'
import{insertCertificate,updateCertificate,deleteCertificate,updateCertificateType} from "@/network/business/qualificationCertificate";

export default {
  name: "QualificationCertificate",
  data(){
    return{
      searchForm:{   //查询资质证照表单
        cer_id:'',
        cer_kind:-1,
        cer_name:null,
        cer_type:-1,
        ser_id:'',
      },
      addCertificationForm:{
        // cer_kind:1,
        cer_name:'',
        cer_price:'',
        cer_type:1,
        ser_id:'',
      },
      updateCertificationForm:{
        cer_id:'',
        // cer_kind:1,
        cer_name:'',
        cer_price:'',
        cer_type:1,
        ser_id:'',
      },
      certificationRule:{  //添加、编辑验证规则
        cer_name: [{ required: true, message: '请输入资质证照名', trigger: 'blur' },],
        cer_price:[{ required: true, message: '请输入价格', trigger: 'blur' },],
      },
      currentPage: 1,  //当前页面
      pageSize:5,  //页面条数，默认为10条
      addDialogVisible: false,  //增加资质证照对话框
      updateDialogVisible: false,   //编辑资质证照对话框
      tableData:[],  //服务器中请求的数据
      showTableData:[],  //分页的列表
    }
  },
  methods:{
    getCertificationFromServer(){  //从服务器中获取资质证照
      this.currentPage = 1; //每次请求时都设置为第一页
      getCertificateByKey(this.searchForm).then(res=>{
        this.tableData = res.data;
        this.getTableData();  //提取相应的数据显示在表格中
      })
    },

    onAddCertification(){  //添加资质证照
      this.$refs.addCertificationRef.validate(valid=>{
        if(valid){   //验证成功
          insertCertificate(this.addCertificationForm).then(res=>{
            console.log(res);
            if(res.data.status==200){
              this.$message.success("添加资质证照成功！");
              this.$refs.addCertificationRef.resetFields();  //将添加表单的数据清空
              this.addDialogVisible = false;
              this.getCertificationFromServer();
            }
            if(res.data.status==500){
              this.$message.error("添加资质证照失败，请重新添加！");
            }
          })
        }
        else{  //验证失败
          this.$message.error("请按提示填写表单！");
          return false;
        }
      })
    },
    onUpdateCertification(){  //编辑资质证照
      this.$refs.updateCertificationRef.validate(valid=>{
        if(valid){
          updateCertificate(this.updateCertificationForm).then(res=>{
            if(res.data.status==200){
              this.$message.success("编辑资质证照成功！");
              this.updateDialogVisible = false;
              this.$refs.updateCertificationRef.resetFields();  //将编辑表单的数据清空
              this.getCertificationFromServer();
            }
            if(res.data.status==500){
              this.$message.error("编辑资质证照失败，请重新编辑！");
            }
          })
        }
        else{
          this.$message.error("请按提示填写表单！");
          return false;
        }
      })
    },
    //切换资质证照的状况
    toggleState(certification){
      updateCertificateType(certification.cer_id).then(res=>{
        if(res.data.status==200){
          certification.cer_type = certification.cer_type==1 ? 0 : 1;
          if(certification.cer_type==1){
            this.$message.success(`"${certification.cer_name}"资质证照上线成功！`);
          }
          else{
            this.$message.success(`"${certification.cer_name}"资质证照下线成功！`);
          }
        }else{
          this.$message.error(`”${certification.cer_name}“资质证照状态修改失败！`);
        }
      })
    },
    deleteCertification(certification){ //删除资质证照
      this.$confirm(`${certification.cer_name}资质证照会被永久删除,是否继续?`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        deleteCertificate(certification.cer_id).then(res=>{
          if(res.data.status==200){
            this.$message.success(`${certification.cer_name}资质证照删除成功！`);
            this.getCertificationFromServer();
          }
          if(res.data.status==500){
            this.$message.error(`${certification.cer_name}资质证照删除失败！`)
          }
        })
      }).catch(()=>{
        return this.$message('已取消删除！');
      })
    },

    resetForm(formName){  //重置查询表单
      this.$refs[formName].resetFields();  //清除表单数据
      this.getCertificationFromServer();
    },
    onSubmit(){  //查询
      this.getCertificationFromServer();
    },
    showAddCateDialog() { //点击添加按钮
      this.addDialogVisible = true;
    },
    addDialogClosed(){  //关闭“添加资质证照”对话框
      this.addDialogVisible =false;
    },
    updateCertificationClick(certification){  //点击“编辑资质证照”按钮
      this.updateDialogVisible = true;
      this.updateCertificationForm = certification;
    },
    updateDialogClosed(){  //关闭“编辑资质证照”对话框
      this.updateDialogVisible = false;
      this.$refs.updateCertificationRef.resetFields();
    },
    //分页
    handleSizeChange(val){  //每页条数变化
      this.pageSize =val;
      this.getTableData();
    },
    handleCurrentChange(val){  //当前页发生改变
      this.currentPage = val;
      this.getTableData();
    },
    getTableData(){  //获取数据
      let startIndex = (this.currentPage-1)*this.pageSize;
      let endIndex = startIndex+this.pageSize > this.tableData.length ? this.tableData.length : startIndex+this.pageSize;
      this.showTableData = this.tableData.slice(startIndex,endIndex);
    }
  },
  computed:{
    total(){ //总条数
      return this.tableData.length;
    }
  },
  created() {
    this.getCertificationFromServer();
  }
}
</script>

<style scoped>
.qualification-certificate{
  height: 100%;
}
.search{
  border: 1px solid #999999;
  border-radius: 3px;
  margin-bottom: 10px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
</style>
